<!-- Copyright 2017 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="/components/common_styles/common_styles.html">

<!--
  <iron-icon> that automatically displays one of the two icons depending on
  display resolution,

  Example:
    <hd-iron-icon icon1x="icons:wifi-1x" icon2x="icons:wifi-2x"></hd-iron-icon>

  Attributes:
    1x and 2x icons:
      'icon1x' - a name of icon from material design set to show on button.
      'icon2x' - a name of icon from material design set to show on button.
    1x and 2x sources:
      'src1x' - A direct source to a file. For example, a SVG file.
      'src2x' - A direct source to a file. For example, a SVG file.

-->
<dom-module id="hd-iron-icon">
  <template>
    <style include="oobe-common-styles">
      @media all and (-webkit-max-device-pixel-ratio: 1.5) {
        #icon2x {
          display: none;
        }
      }

      @media all and (-webkit-min-device-pixel-ratio: 1.5) {
        #icon1x {
          display: none;
        }
      }
    </style>
    <div class="flex layout vertical" aria-hidden="true">
      <iron-icon id="icon1x" icon="[[icon1x]]" src="[[src1x]]"></iron-icon>
      <iron-icon id="icon2x" icon="[[icon2x]]" src="[[src2x]]"></iron-icon>
    </div>
  </template>
  <script src="hd_iron_icon.js"></script>
</dom-module>
